/* 全局公共样式 */
[class*=" el-icon-"]:hover,
[class^="el-icon-"]:hover {
  cursor: pointer;
}

[class*=" el-icon-"],
[class^="el-icon-"] {
  transition: all 0.5s ease-in-out;
  will-change: transform;
}

[annotation] {
  margin-right: 6px;

  &::before {
    content: "*";
    vertical-align: middle;
    color: red;
  }
}

/** 顶部进度条 */
#nprogress .bar {
  @include themify() {
    background-color: themed("nprogress");
  }
  height: 3px !important;
}


/* svg-icon的button */
.svg-icon-button {
  .el-button {
    .svg-icon {
      width: 12px;
      height: 13px;
      font-size: 12px;
      margin-right: 5px;
    }
  }
}

/* 下拉框 */
.el-select-dropdown {
  .el-scrollbar {
    .el-select-dropdown__wrap.el-scrollbar__wrap {
      margin-bottom: 0 !important;
    }
  }
}

.el-dropdown-menu {
  .el-checkbox-group {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;

    .el-checkbox {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 3px 3px 3px 10px;

      .el-checkbox__label {
        display: inline-block;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }
}

/* 自定义class下拉框 */
.inspect-select-popper {
  background: rgb(10, 24, 62) !important;
  border-color: rgb(10, 24, 62) !important;

  .el-select-dropdown__item {
    color: #ffffff;
  }

  .el-select-dropdown__item.selected {
    color: inherit;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    @include themify() {
      background: themed("darkBg");
    }
  }

  .el-select-dropdown__empty {
    padding: 8px 0;
  }
}

.inspect-select-popper.el-popper[x-placement^="bottom"] .popper__arrow::after,
.inspect-select-popper.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: rgb(10, 24, 62);
}

/* 进度条*/
.el-progress--line {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.el-progress-bar {
  flex-shrink: 0;
}

.el-progress__text {
  @include themify() {
    color: themed("textColor");
  }
  flex-shrink: 0;
}

/* 时间选择器*/
.el-picker-panel [slot="sidebar"],
.el-picker-panel__sidebar {
  width: 92px !important;
}

.el-date-range-picker.has-sidebar {
  width: 623px !important;
}

/* column-checkbox-group 列*/
.el-checkbox-group.column-checkbox-group {
  display: flex;
  flex-direction: column;
}

/* disabled checkbox*/
.el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
  background-color: #c0c4cc !important;
  border-color: #c0c4cc !important;

  &::before {
    border-color: #fff !important;
    background-color: #fff !important;
  }

  &::after {
    border-width: 2px;
    border-color: #fff !important;
  }

}

.table-border {
  td {
    @include themify() {
      border: 1px solid themed("borderColor");
    }
  }

  .td-bgcolor {
    @include themify() {
      background-color: themed("tdBg");
    }
  }
}


//  提示文字
.text-tips {
  font-size: 12px;
  padding-bottom: 5px;
  line-height: 20px;
  font-weight: 500;
  color: yellow;
  text-align: left;
}

// 空数据
.shadow-empty {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  // background: #113b73;
  @include themify() {
    background-color: themed("BgColorDisabledText");
  }
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.warn.el-button--info {
  color: #fff;
  background: rgb(216, 216, 46);
}

.warn.el-button--info.is-plain {
  background: #f5f5e1;
}

// 警告按钮颜色
.warn.el-button--info.is-plain {
  color: rgb(216, 216, 46);
  border-color: rgb(216, 216, 46);
}

.warn.el-button.el-button--info:focus,
.warn.el-button.el-button--info:hover,
.warn.el-button.el-button--info:active {
  background: rgb(216, 216, 46);
  border-color: rgb(216, 216, 46);
  color: #ffffff;
}
